
<template>
    <div class="sbox">
        <el-tabs type="border-card" class="demo-tabs">
            <el-tab-pane label="基本设置">
                <template #label>
                    <span class="custom-tabs-label">
                        <el-icon>
                            <Setting />
                        </el-icon>
                        <span>基本设置</span>
                    </span>
                </template>
                <el-checkbox v-model="checked1" :checkbox="checked1" @change='get' label="后台不显示信息" size="large" /> <br>
                <el-button type="success"><i class="iconfont icon-baocun2"></i> 保存</el-button>



            </el-tab-pane>
            <el-tab-pane label="修改密码">
                <template #label>
                    <span class="custom-tabs-label">
                        <el-icon>
                            <Lock />
                        </el-icon>
                        <span>修改密码</span>
                    </span>
                </template>
                <div class="update">
                    <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" status-icon :rules="rules"
                        label-width="auto" class="demo-ruleForm">
                        <el-form-item label="旧密码" prop="oldpassword">
                            <el-input v-model.number="ruleForm.oldpassword" />
                        </el-form-item>
                        <el-form-item label="新密码" prop="newpassword">
                            <el-input v-model="ruleForm.newpassword" type="password" autocomplete="off" />
                        </el-form-item>
                        <el-form-item label="确认密码" prop="password">
                            <el-input v-model="ruleForm.password" type="password" autocomplete="off" />
                        </el-form-item>

                        <el-form-item>
                            <el-button class="but" type="success" @click="submitForm(ruleFormRef)">
                                Submit
                            </el-button>

                        </el-form-item>
                    </el-form>
                </div>
            </el-tab-pane>
            <el-tab-pane label="切换皮肤">
                <template #label>
                    <span class="custom-tabs-label">
                        <el-icon>
                            <EditPen />
                        </el-icon>
                        <span>切换皮肤</span>
                    </span>
                </template>
                <div class="color">
                    <div v-for="(color, index) in arr" :key="index">
                        <div class="color-block" :style="{ backgroundColor: color }">
                        </div><br>
                        <input type="radio" :value="color" name="color" v-model="color1" @change="updatecolor">
                    </div>

                </div>
                <el-button type="success" class="but1" @click="save" >保存修改</el-button>

            </el-tab-pane>
        </el-tabs>

    </div>
</template>

<script lang="ts" setup>
import { reactive, ref, inject, onMounted } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { useIndexStore } from '../../store'


const ruleFormRef = ref<FormInstance>()
let color1 = ''
const arr = ['#1389D3', '#1ABC9C', '#E95420', '#996699', '#2C3E50', '#CC0033']
const checkAge = (rule: any, value: any, callback: any) => {
    if (!value) {
        return callback(new Error('旧密码不能为空'))
    }
}

const validatePass = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('新密码不能为空'))
    } else {
        if (ruleForm.password !== '') {
            if (!ruleFormRef.value) return
            ruleFormRef.value.validateField('checkPass')
        }
        callback()
    }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('Please input the password again'))
    } else if (value !== ruleForm.newpassword) {
        callback(new Error("密码不一致"))
    } else {
        callback()
    }
}

const ruleForm = reactive({
    newpassword: '',
    password: '',
    oldpassword: '',
})

const rules = reactive<FormRules<typeof ruleForm>>({
    newpassword: [{ validator: validatePass, trigger: 'blur' }],
    password: [{ validator: validatePass2, trigger: 'blur' }],
    oldpassword: [{ validator: checkAge, trigger: 'blur' }],
})
let save=()=>{
localStorage.setItem('navBackgroundColor',JSON.stringify(color1))
}

const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            console.log('submit!')
        } else {
            console.log('error submit!')
        }
    })
}


const checked1 = ref(true)
let updatecolor = () => {
    store.home_ref.style = `background:${color1} !important; `
}
const get = () => {
    console.log(checked1.value);

}
const store = useIndexStore()


</script>

<style  scoped>
@import url('//at.alicdn.com/t/c/font_4607095_705ynpbns3n.css');

.demo-tabs .custom-tabs-label .el-icon {
    vertical-align: middle;
}

.color {
    width: 272px;

    display: flex;
    justify-items: center;
    flex-wrap: wrap;
    text-align: center;
    justify-content: space-evenly;
}

.but {
    margin-left: 68px;
}
.but1 {
    margin-left: 16px;
    margin-top: 20px;
}

.el-loading-spinner {
    display: flex;
}

.el-loading-spinner .el-loading-text {
    color: #fff;
    font-size: 14px;
    margin: 3px 0;
}

.update {
    margin-top: 20px;
}

.loadin {
    width: 100px;
    color: #fff;
    height: 30px;
    background: rgba(0, 0, 0, 0.7);
    text-align: center;
    line-height: 30px;
    position: fixed;
    top: 10px;
    left: 0;
    right: 0;
    margin: auto;
}

.demo-tabs .custom-tabs-label span {
    vertical-align: middle;
    margin-left: 4px;
}

.bg-purple-400 {
    --tw-bg-opacity: 1;
    background-color: color1;
}

el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
    background-color: var(--el-bg-color-overlay);
    border-left-color: var(--el-border-color);
    border-right-color: var(--el-border-color);
    color: var(--el-color-primary);
}


.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
    color: #555;
}

.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active:hover {
    color: #555;
}

.el-tabs--border-card>.el-tabs__header .el-tabs__item {
    color: #428BCA;
}

.el-tabs--border-card>.el-tabs__header .el-tabs__item:not(.is-active):hover {
    color: #2A6496;
    background: #ccc;
}

.el-tabs--border-card>.el-tabs__header {
    background-color: #fff;
    color: bule;
}

.demo-tabs>.el-tabs__content {
    padding: 0;


    height: 100vh;
    /* font-weight: 600; */
}

.bg-amber-400 {
    --tw-bg-opacity: 1;
    background-color: #F1F1F1;
}

.el-tab-pane {
    margin-left: 100px;
}

.el-tab-pane {
    padding: 0 !important;
}

.el-checkbox__input.is-checked+.el-checkbox__label {
    color: #606266;
}

.el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #606266;
    border-color: #606266;
}

.color-block {
    width: 70px;
    height: 70px;
    margin-top: 30px;
    display: inline-block;

}
</style>